// //通用富文本编辑组件，依赖jquery
import React from 'react';
import  Simditor  from 'simditor';
import 'simditor/styles/simditor.scss';
import './index.scss';


class RichEditor extends React.Component{
 constructor(props){
   super(props);
   this.loadEditor = this.loadEditor.bind(this);
   this.bindEditorEvent = this.bindEditorEvent.bind(this);
 }
 componentDidMount(){
   this.loadEditor();
 };
 componentWillReceiveProps(nextProps){
    if(this.props.defaultDetail!=nextProps.defaultDetail){
        this.simditor.setValue(nextProps.defaultDetail);
      }    
 }
 loadEditor(){
   let element = this.refs['textarea'];
   this.simditor = new Simditor({
     textarea:$(element),
     defaultValue: this.props.placeholder || '请输入内容！',
     upload: {
      url: '/manage/product/richtext_img_upload.do',
      fileKey: 'upload_file',
      connectionCount: 3,
      leaveConfirm:'Uploading is in progress, are you sure to leave this page?'
     }
   });
   this.bindEditorEvent();
 }
 //初始化富文本编辑器的事件
 bindEditorEvent(){
   //jquery事件转换成RichEditor组件的事件
  this.simditor.on('valuechanged',e => {
    this.props.onValueChange(this.simditor.getValue());
  })
 }
render(){
	return (
    <div className="rich-eidtor">
      <textarea ref="textarea"></textarea>
    </div>
	)	        
 }
}
export default RichEditor;